<template>
  <div class="hello">
    <h1>hello ,{{name}}</h1>
    <p>获取store中的值：第一种：$store.state.xxx取值</p>
    <h2>{{$store.state.msg}}</h2>
    
    <p>以下：但都是通过computed取值</p>
    <p>获取store中的值：第二种：本身computed取值</p>
     <!-- <h2>test:{{getTest}}</h2> -->
    <p>获取store中的值：第三种:getters取值</p>
    <p>count:{{$store.getters.getCount}}</p>

    <p>获取store中的值：第四种：mapGetters取值</p> 
    <h2>修改后的count:{{getCount}}{{isEvenOrOdd}}</h2>
    <hr>
    <p>commit触发mutations</p>
    <h2>
      数目count：{{$store.state.count}} 
      <p>
        <!-- 第一种：写在函数里 -->
        <button @click="add()">加</button>
        <!-- 第二种：直接写表达式 -->
        <!-- 通过commit修改mutations中的，commit('xxxx',n)  xxx代表mutations中的xxxx方法,n表示参数-->
        <button @click="$store.commit('add',5)">每次加5</button>
      </p>
    </h2>
     <!-- 第三种：mapMutations -->
    <button @click="size_add()">size加</button>
    <p><b>size:{{$store.state.size}}</b></p>
    <hr>
    <p>dispatch触发actions</p>
    <h2>
      <button @click="a_changeMsg()">点击后2000ms修改msg</button>  
      <p>msg:{{$store.state.msg||'暂无'}}</p>
      <p>store计算属性修改分数的初始值：{{$store.state.score}}</p>
      <button @click="a_reduce()">修改num,每次减2</button>
      <p>{{$store.state.num}}</p>  
    </h2>
  </div>
</template>

<script>
import { mapState,mapGetters, mapMutations,mapActions } from 'vuex';
export default {
  name: 'HelloWorld',
  data () {
    return {
      loveStar:'',
    }
  },
  // 第一种：
  // computed:{
  //   getTest(){
  //     return this.$store.state.test;
  //   }
  // },
  // 第二种
  // this.$store.getters.getCount;
  computed:{
    ...mapGetters(['getCount','isEvenOrOdd']),
    ...mapState(['name'])
  },
  mounted(){
    this.a_changeScore();
  },
  methods:{
    add(){
      //第一种：commit触发mutations
      this.$store.commit('addCount');
    },
    // a_reduce(){
    //   this.$store.dispatch('a_reduce');
    // },
    // a_changeMsg(){
    //   this.$store.dispatch('a_changeMsg');
    // },
    a_changeScore(){
      var arr =[12,33,67,88,98];
      this.$store.dispatch('a_changeScore',arr);
    },
    ...mapMutations({
      size_add:'addSize'
    }),
    // mapActions将this.a_reduce映射为this.$store.dispatch('a_reduce')
    // ...mapActions(['a_reduce','a_changeMsg'])
    // 等价于
    ...mapActions({
      a_reduce:'a_reduce',
      a_changeMsg:'a_changeMsg'
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
p{
  font-size: 14px;
}
h1, h2 {
  font-weight: normal;
}
h1{
  font-size: 24px;
}
h2{
  font-size: 18px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
